<template>
	<view class=" main-bgH   ">
		<navigationBar></navigationBar>
		<!-- 		<image mode="widthFix" style="width: 200rpx;height: auto;left: 50rpx; margin-top: 20rpx;" class="abs"
			src="@/static/logo.png">
		</image>
		<view class="queren abs" @click="onExport" style="right: 50rpx;">
			确认
		</view>
		<view class="p-t-90 flex  fd-c ai-c">

			<view class="preview-area">

				<canvas-drag ref="canvasRef" id="canvas-drag" :graph="graph" :width="cWidth" :height="cHeight"
					:enableUndo="false" @sticker-deleted="handleStickerDeleted"></canvas-drag>
			</view>

			<view class="sticker-container fix " style="bottom: 0;">
				<view class="heng abs-x">

				</view>
	
				<view class="p-tb-20 fs-28 fw-400" style="color: #454545;">
					点击下方贴纸，可DIY装饰照片
				</view>
				<view class="sticker-row" v-for="(row, index) in chunkedStickers" :key="index">
					<view v-for="sticker in row" :key="sticker.id" class="sticker-item" @tap="addSticker(sticker)">
						<image :src="sticker.url" mode="aspectFit"></image>
					</view>
				</view>
			</view>

		</view> -->




		<!-- <pop :visible.sync="popshow" :maskClickClose="true" @cancel="handleProgressCancel"> -->
		<!-- 			<view class="c-fff " style="padding-bottom: 70rpx;">您已与Honda F1赛车合影！</view> -->
		<view class="fw-400" style="font-size: 60rpx;color: #242021;width: 504rpx;margin: 0 auto;">
			向未来比个烨</view>
		<view class="" style="width: 80rpx;background-color: #000;height: 4rpx;;margin: 26rpx auto; 0">
		</view>
		<image :src="filePath" style="margin-top: 120rpx;" mode="widthFix" @touchstart="handleTouchStart" @touchend="handleTouchEnd"
			@touchcancel="handleTouchEnd"></image>
		<view class="" style="padding-top: 55rpx;color: #000000;">长按图片保存至手机</view>


<!-- 		<view v-if="checkInShow" @click="showPop"
			style="width: 322rpx;height: 67rpx; border-radius: 7rpx; line-height: 67rpx;letter-spacing: 4rpx;margin: 30rpx auto 0;"
			class=" bg-fff ">解锁闪耀值</view> -->

		<view @click="toH5"
			style="width: 322rpx;height: 67rpx; border-radius: 7rpx; line-height: 67rpx;letter-spacing: 4rpx;margin: 30rpx auto 0;"
			class=" bg-fff ">返回首页</view>



		</image>

		<pop :visible.sync="popshow" :maskClickClose="true" @cancel="handleProgressCancel">



			<image @click="toH5" ref="fixedRef" style="width: 5vw; position: fixed; top: 9vw;right: 7vw;" 
		class="fixed-element"		src="https://data-h5.oss-cn-shenzhen.aliyuncs.com/yang/2025/0311/btsh/icon_close.png" mode="widthFix">


				<image style="width: 70vw;" class="abs-x"
					src="https://data-h5.oss-cn-shenzhen.aliyuncs.com/yang/2025/0311/btsh/icon_dkcg.png"
					mode="widthFix">
				</image>

		</pop>



	</view>



</template>

<script>
	import pop from "@/components/pop.vue"
	// 互动2 操作页面
	import canvasDrag from "@/components/canvas-drag/index";
	import navigationBar from "@/components/navigationBar.vue"
	export default {
		data() {
			return {
				diyImg: "", // 背景图
				cWidth: 653 * 0.85,
				cHeight: 875 * 0.85,
				stickers: [{
						id: 1,
						url: "/static/stickers/1.png",
						type: "flower"
					},
					{
						id: 2,
						url: "/static/stickers/2.png",
						type: "star"
					},
					{
						id: 3,
						url: "/static/stickers/3.png",
						type: "star"
					},
					{
						id: 4,
						url: "/static/stickers/4.png",
						type: "star"
					},

					{
						id: 5,
						url: "/static/stickers/5.png",
						type: "star"
					},
					{
						id: 6,
						url: "/static/stickers/6.png",
						type: "star"
					},
					{
						id: 7,
						url: "/static/stickers/7.png",
						type: "star"
					},
					{
						id: 8,
						url: "/static/stickers/8.png",
						type: "star"
					},
					// ...共8个贴纸数据
				],
				addedStickers: new Set(), // 用于记录已添加的贴纸类型
				graph: {},

				popshow: false,
				// popshow: true,
				filePath: "",

				pressTimer: null,
				longPressDuration: 100, // 微信弹窗触发时间约800ms（需实测）

				checkInShow: false,
			};
		},

		components: {
			canvasDrag,
			pop,
			"navigationBar": navigationBar,
		},

		computed: {
			// 将贴纸数据分成两行
			chunkedStickers() {
				return this.chunk(this.stickers, 4);
			}
		},
		onLoad(options) {


			if (options.diyImg) {
				console.log('>>>>>>>拿到图片了', options.diyImg)

				this.diyImg = options.diyImg

			} else {
				uni.showModal({
					title: "出错了，请联系工作人员",
				})
				return


			}
		},
		onReady() {

			if (this.diyImg) {
				// this.$refs.canvasRef.changeBgImage(this.diyImg)

				this.filePath = this.diyImg
				// this.popshow = true


			} else {
				uni.showModal({
					title: "图片地址为空"
				})
				// // // 测试步骤
				// this.diyImg =
				// 	"https://data-h5.oss-cn-shenzhen.aliyuncs.com/yang/2025/0311/202412202350572cfb2f4d127d44eefa4ff54ee8f9bb5cf.png"
				// this.$refs.canvasRef.changeBgImage(this.diyImg)
			}
		},
		onShow() {
			if (uni.getStorageSync('checkIn')) {

				this.checkInShow = uni.getStorageSync('checkIn').pid.includes(131);
			}
		},
		methods: {
			showPop() {

				this.popshow = true


				this.$nextTick(() => {
					const el = this.$refs.fixedRef;
					el.style.position = 'fixed';
					el.style.top = '50px';
				});



			},
			toH5() {
				// 网页内跳转时携带参数

				console.log('https://projects.topversion.cn/btzg2025sh/web/activity/getdakaHtml?type=0&user=' + uni
					.getStorageSync('openid'))

				window.location.href = 'https://projects.topversion.cn/btzg2025sh/web/activity/getdakaHtml?type=0&user=' +
					uni.getStorageSync('openid');
			},
			checkIn() {
				let param = {
					openid: uni.getStorageSync('openid')
				}
				this.$http.get('/TakePhoto/checkIn', param, res => {
					console.log(res)

					uni.setStorageSync('checkIn', res.data);


					this.checkInShow = uni.getStorageSync('checkIn').pid.includes(131);




				})
			},
			handleTouchStart() {
				this.pressTimer = setTimeout(() => {
					this.onLongPress();
				}, this.longPressDuration);
			},
			handleTouchEnd() {
				clearTimeout(this.pressTimer);
			},
			onLongPress() {
				// 用户长按了足够时间，可能触发微信弹窗
				// uni.showToast({
				// 	title:"检测到长按，微信弹窗可能已出现"
				// })
				console.log("检测到长按，微信弹窗可能已出现");
				let param = {
					user: uni.getStorageSync('openid'),
					type: 0,
					option: "0",
				}
				console.log(param)
				this.$http.get('/TakePhoto/getdaka', param, res => {
					console.log(res)

					this.checkIn()
				})


				// 这里可执行统计等逻辑
			},
			handleStickerDeleted(sourceId) {
				this.addedStickers.delete(sourceId); // 从 Set 中移除被删贴纸的ID
			},
			// 工具方法：数组分块
			chunk(arr, size) {
				return Array.from({
						length: Math.ceil(arr.length / size)
					}, (v, i) =>
					arr.slice(i * size, i * size + size)
				);
			},

			// 添加贴纸
			addSticker(sticker) {
				let that = this;
				if (this.addedStickers.has(sticker.id)) {
					uni.showToast({
						title: '该贴纸已存在',
						icon: 'none'
					});
					return;
				}
				this.addedStickers.add(sticker.id);
				uni.getImageInfo({
					src: sticker.url,
					success: function(image) {
						that.graph = {
							w: image.width / 6,
							h: image.height / 6,
							type: 'image',
							url: sticker.url,
							sourceId: sticker.id // 确保传递唯一ID
						};
					}
				});
			},

			// 导出图片
			onExport() {
				this.$refs.canvasRef.exportFun().then(filePath => {
					// uni.previewImage({
					// 	urls: [filePath]
					// });
					this.filePath = filePath
					this.popshow = true
				});
			}
		}
	};
</script>

<style lang="scss">
	.fixed-element {
	  position: fixed !important;
	}
	
	.queren {
		width: 176rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: #FFFFFF;
		border-radius: 7rpx;
	}

	.main-bgH {

		// padding: 12vh 0 0;

	}

	.heng {
		width: 76rpx;
		height: 5rpx;
		background: #000000;
		border-radius: 3rpx;

	}

	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.header {
		height: 80rpx;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);

		.logo {
			width: 120rpx;
			height: 60rpx;
		}

		.confirm-btn {
			padding: 8rpx 24rpx;
			background: #07c160;
			color: white;
			border-radius: 40rpx;
			font-size: 28rpx;
		}
	}

	.preview-area {
		// flex: 1;
		// height: 50vh;

		// width: 653rpx;
		// height: 840rpx;
		margin-bottom: 550rpx;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #f5f5f5;
	}

	.sticker-container {
		height: 500rpx;
		width: 100%;
		padding: 20rpx 0;
		background: #fff;
		border-top: 1rpx solid #eee;

		.sticker-row {
			display: flex;
			justify-content: space-around;
			margin-bottom: 20rpx;

			.sticker-item {
				width: 165rpx;
				height: 165rpx;
				background: #F0F2F5;
				border-radius: 17rpx;
				border: 1px solid #DADCDF;

				image {
					width: 100%;
					height: 100%;
					padding: 20rpx;
				}
			}
		}
	}
</style>